//过滤规则设置
import CommonModal from "@/components/CommonModal";
import CommonLoading from "@/components/CommonLoading";
import { useEffect, useState } from "react";
import { Form, Select, Input, Radio, Popover, Row, Col } from "antd";
import { message } from "antd";
import { symbolAndAfterContent, symbolAndMiddleContent, changeRuleSetting } from "./service";
import Iconfont from "@/components/IconFont";
import AntdFormWarp from "@/components/AntdFormWarp";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";


const { Option } = Select;

const options = [
	{ label: "括号（）中的内容", value: "original-code" },
	{ label: "括号【】中的内容", value: "spu-spec" },
	{ label: "括号[]中的内容", value: "original-code-spec" },
	{ label: "括号{}中的内容", value: "original-code-id" },
	{ label: "空格", value: "original-code-id3" },
	{ label: "逗号", value: "original-code-id4" }
];

const connectOptions = [
	{ label: "-", value: "-" },
	{ label: "/", value: "/" },
	{ label: "#", value: "#" },
	{ label: "——", value: "——" },
	{ label: "|", value: "|" },
	{ label: "空格", value: "空格" },
	{ label: "\\", value: "\\" },
	{ label: ":", value: ":" },
	{ label: ";", value: ";" },
	{ label: ",", value: "," },
	{ label: "@", value: "@" },
	{ label: "&", value: "&" }
];

const layout = {
	labelCol: {
		span: 8
	},
	wrapperCol: {
		span: 14
	}
};

/** 过滤规则设置 */
function FilterRuleModal(props) {
	const { item = {}, handleCancel, handleOk } = props;
	const [isOk, setIsOk] = useState(false);
	const [loading, setLoading] = useState(false);
	const [open, setOpen] = useState(false);
	const [symbolMiddleContentArr, setSymbolMiddleContentArr] = useState([]); //过滤符号以及中间内容下拉
	const [symbolAfterContentArr, setSymbolAfterContentArr] = useState([]); //过滤符号以及之后内容下拉

	console.log("item123", item);

	const [form] = Form.useForm();

	useEffect(() => {
		setOpen(true);
		getSymbolAndAfterContent();
		getSymbolAndMiddleContent();
		form.resetFields();
	}, []);

	//问号以及对应文案展示
	const iconTextRender = text => {
		return (
			<Popover content={<div style={{ width: "300px" }}>{text}</div>}>
				<span>
					<Iconfont type="iconwenhao1" />
				</span>
			</Popover>
		);
	};

	const onOk = () => {
		form.validateFields().then(val => {
			console.log("val123", val);

			handleSubmit(val);
		});
	};

	//获取过滤符号以及之后内容下拉
	const getSymbolAndAfterContent = async () => {
		setLoading(true);
		const { success, data = [] } = await symbolAndAfterContent();
		setLoading(false);
		if (success) {
			setSymbolAfterContentArr(data);
		}
	};

	//获取过滤符号以及中间内容下拉
	const getSymbolAndMiddleContent = async () => {
		setLoading(true);
		const { success, data = [] } = await symbolAndMiddleContent();
		setLoading(false);
		if (success) {
			setSymbolMiddleContentArr(data);
		}
	};

	//点击确定
	const handleSubmit = async val => {
		setLoading(true);
		const { success, msg = "" } = await changeRuleSetting({
			...val,
			keyword: val.keyword?.replaceAll("，", ",").split(","),
			id: item.id
		});
		setLoading(false);
		if (success) {
			message.success(msg);
			setIsOk(true);
			setOpen(false);
		}
	};

	const onCancel = () => {
		setOpen(false);
	};

	const afterClose = () => {
		if (isOk) {
			handleOk();
		} else {
			handleCancel();
		}
	};

	return (
		<CommonModal
			zIndex={1001}
			title="过滤规则设置"
			afterClose={afterClose}
			open={open}
			width="500px"
			onOk={onOk}
			onCancel={onCancel}
		>
			<Form
				form={form}
				// className="new-search-form-style"
				onFinish={() => {}}
				name="express-warning-search-form"
				initialValues={{
					...item,
					status: item.status + "",
					keyword: item.keyword && item.keyword.join(",")
				}}
				// {...layout}
			>
				<AntdFormWarp>
					<Form.Item label="" name="symbolMiddleContent">
						<Select mode="multiple" placeholder="过滤符号及中间内容">
							{symbolMiddleContentArr.map(item => (
								<Option value={item.desc} key={item.code}>
									{item.desc}
								</Option>
							))}
						</Select>
					</Form.Item>
				</AntdFormWarp>
				<AntdFormWarp>
					<Form.Item label="">
						<div style={{ display: "flex" }}>
							<Form.Item noStyle label="" name="keyword">
								<Input placeholder="关键字过滤，多个请用“,”隔开" />
							</Form.Item>

							{iconTextRender("关键词从左至右排列进行优先级过滤")}
						</div>
					</Form.Item>
				</AntdFormWarp>

				<AntdFormWarp>
					<Form.Item label="">
						<div style={{ display: "flex" }}>
							<Form.Item noStyle label="" name="symbolAfterContent">
								<Select placeholder="过滤符号及之后内容">
									{symbolAfterContentArr.map(item => (
										<Option key={item.code} value={item.desc}>
											{item.desc}
										</Option>
									))}
								</Select>
							</Form.Item>
							{iconTextRender("字符后所有的内容都将被截去（包含字符本身，符号不区分中英文）")}
						</div>
					</Form.Item>
				</AntdFormWarp>
				<SubTitle symbol title="是否开启" as="s2" wrapStyle={{ marginBottom: 16 }} />
				<Form.Item name="status" label="">
					<Radio.Group>
						<Radio value="1">是</Radio>
						<Radio value="0">否</Radio>
					</Radio.Group>
				</Form.Item>
			</Form>
			<CommonLoading loading={loading} />
		</CommonModal>
	);
}

export default FilterRuleModal;
